import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React, { useState } from 'react';

import routes from '@/routes';
import { getMenuInfoByPath } from '@/routes/RouteUtil';
import { settingTabRoutes } from '@/routes/modules/menus';
import { useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';

const Setting: React.FC = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  const onClick: MenuProps['onClick'] = (e) => {
    navigate(e.key);
  };

  useEffect(() => {
    if (pathname) {
      const { parentKeys } = getMenuInfoByPath(routes, pathname);
      setSelectedKeys(parentKeys);
    }
  }, [pathname]);

  return (
    <>
      <div>
        <Menu
          mode="horizontal"
          selectedKeys={selectedKeys}
          items={
            settingTabRoutes.map((v) => ({
              key: v.path,
              label: v.label,
            })) as any
          }
          onClick={onClick}
        />
      </div>
      {/* Outlet相当于是子路由的占位符 */}
      <Outlet />
    </>
  );
};

export default Setting;
